<!-- 施工明细 -->
<template>
  <div>
    <el-form class="searchForm">
      <el-form-item style="margin-left: 10px;">
        <el-select placeholder="项目名" v-model="params.contractId" clearable @change="changeContract">
          <el-option v-for="c of contract" :label="c.projectName" :value="c.contractId" :key="c.contractId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 10px;">
        <el-button type="primary" @click="getCommodityPageList">
          <el-icon>
            <svg t="1646977561352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="3057" width="200" height="200">
              <path
                d="M986.304 871.424L747.328 630.4c-2.816-2.752-5.888-4.928-8.768-7.232 40.32-62.464 63.936-136.832 63.936-216.96 0-220.16-176.96-398.592-395.392-398.592C188.8 7.616 11.712 186.048 11.712 406.208s177.088 398.592 395.392 398.592a391.232 391.232 0 0 0 215.36-64.576c2.24 3.072 4.352 6.08 7.04 8.832l239.04 241.024a82.688 82.688 0 0 0 117.76 0 84.48 84.48 0 0 0 0-118.656m-579.2-192.512c-149.12 0-270.528-122.368-270.528-272.704 0-150.4 121.344-272.768 270.528-272.768 149.12 0 270.528 122.432 270.528 272.768 0 150.4-121.408 272.704-270.528 272.704"
                p-id="3058"></path>
            </svg>
          </el-icon>
          &nbsp;查&nbsp;&nbsp;询
        </el-button>
      </el-form-item>
    </el-form>
    <div>
      <!-- 导出数据 -->
      <el-button type="warning" @click="export2Table">
        <el-icon>
          <svg t="1647313957290" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2289" width="200" height="200">
            <path
              d="M395.9 406H288.5c-2.8 0-5.7-0.7-8.1-2.4-18.4-13.1-18.2-34.3-6.4-46.3l217.6-220.9c11.1-11.2 29.2-11.4 40.4-0.3l0.3 0.3 217.7 221c11.1 11.3 10.9 29.4-0.4 40.4-5.3 5.2-12.5 8.2-19.9 8.2H628.1v215.7c0 7.9-6.4 14.3-14.3 14.3H410.2c-7.9 0-14.3-6.4-14.3-14.3V406zM283.3 652.4v87.5c0 7.9 6.4 14.3 14.3 14.3h428.8c7.9 0 14.3-6.4 14.3-14.3v-87.5c0-7.9 6.4-14.3 14.3-14.3h142.9c7.9 0 14.3 6.4 14.3 14.3V914c0 7.9-6.4 14.3-14.3 14.3H126.1c-7.9 0-14.3-6.4-14.3-14.3V652.4c0-7.9 6.4-14.3 14.3-14.3H269c7.9 0 14.3 6.4 14.3 14.3z"
              p-id="2290"></path>
          </svg>
        </el-icon>
        &nbsp;导出数据
      </el-button>
    </div>
  </div>

  <!-- 表格 -->
  <el-table ref="multipleTableRef" 
  :data="commodityPageList" 
  style="width: 100%; margin-top: 10px;" 
  table-layout="auto" 
  size="large" 
  :row-class-name="tableRowClassName"
  stripe id="elTable">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="locationName" label="施工位置" sortable />
    <el-table-column prop="constructionType" label="施工类型" sortable />
    <el-table-column prop="number" label="施工长度（米）" sortable :formatter="constructionNumber1" />
    <el-table-column prop="number" label="施工数量（个）" sortable :formatter="constructionNumber2" />
    <el-table-column prop="number" label="施工数量（平方米）" sortable :formatter="constructionNumber3" />
    <el-table-column prop="productName" label="沥青类型" sortable />
    <el-table-column prop="numberProduct" label="沥青数量" sortable :formatter="constructionNumber4"/>
    <el-table-column prop="remark" label="备注" sortable />
  </el-table>

</template>
<script setup>
import { reactive, ref } from 'vue';
import { get, put, del, tip, export2excel, WAREHOUSE_CONTEXT_PATH, post, eltable2excel } from "@/common";
import { useRoute, useRouter } from "vue-router";
import { Search, Edit, Check, Message, Star, Delete } from '@element-plus/icons-vue'

const router = useRouter(); // 获取路由器

// 分页模糊查询数据
const params = reactive({
  contractId:'',
})


// 表格数据
const commodityPageList = ref();

const isPurchase = ref(false);

// 获取路由信息
const route = useRoute();
// 获取查询结果
const getCommodityPageList = () => {
  get("/construction/collectProject", params).then(result => {
    commodityPageList.value = result.data;
  });
}
// getCommodityPageList();

// 所有产品
const productList = ref();
// 获取所有产品
const getStoreList = () => {
  get("/product/product-list").then(result => {
    productList.value = result.data;
  });
}
getStoreList();

// 所有单位
const unitList = ref();
// 获取所有单位
const getUnitList = () => {
  get("/material/unit-list").then(result => {
    unitList.value = result.data;
  });
}
getUnitList();

// 施工类型
const type = ref();
const getAllType = () => {
  get("/constructionType/constructionType-list").then(result => {
    type.value = result.data;
  })
}
getAllType();

// 导出数据
const export2Table = () => {
  eltable2excel("elTable")
}

const check = () => {
  return row.constructionType.measurement
}

const contract = ref();
const getContract = () => {
  get("/contract/contract-all").then(result => {
    contract.value = result.data;
  })
}
getContract();

const location = ref();
// 获得所有位置
const getLocation = (i) => {
  if (i == 1) {
    get("/location/location-list").then(result => {
      location.value = result.data;
    })
  } else {
    get("/location/location-list/" + params.contractId).then(result => {
      location.value = result.data;
    })
  }
};
getLocation(1);

// 选择项目
const changeContract = () => {
}


// 修改每页显示条数
const changeSize = (size) => {
  params.pageSize = size;
  // 重新查询
  getCommodityPageList();
}
// 修改当前页码
const changeCurrent = (num) => {
  params.pageNum = num;
  // 重新查询
  getCommodityPageList();
}

const constructionNumber1 = (row) => {
  if(row.rank == 2){
    return row.collectLength;
  }
  return row.measurement == '施工长度' ? row.number : null;
}
const constructionNumber2 = (row) => {
  if(row.rank == 2){
    return row.collectNumberGe;
  }
  return row.measurement == '施工数量'&& row.unit == 90 ? row.number : null;
}
const constructionNumber3 = (row) => {
  if(row.rank == 2){
    return row.collectNumberM2;
  }
  return row.measurement == '施工数量' && row.unit == 91 ? row.number : null;
}
const constructionNumber4 = (row) => {
  if(row.rank == 2){
    return row.collectNumberProduct;
  }
  return row.numberProduct;
}

// 样式
const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (row.rank === 2) {
    return 'success-row'
  }
  return ''
}

// const xx = ref("");
// const arraySpanMethod = (rows) => {
//   let row = rows.row
//   let column = rows.column
//   let rowIndex = rows.rowIndex
//   let columnIndex = rows.columnIndex


//   // 行
//   if (row.locationName === "合计") {
//     if (columnIndex === 1) {
//       return [1, 2]
//     } else if (columnIndex < 3 && columnIndex > 1) {
//       return [0, 0]
//     }
//   }
//   console.log(0)
//   // 列
//   if (columnIndex == 1) {
//     if (row.category != "合计") {
//       if(xx.value != row.locationName){
//         xx.value = row.locationName
//         // return [1,1]
//       }
//     }
//   }
  
// }

// const xx11 = ref("");
// const arraySpanMethod = (rows) => {
//   let row = rows.row
//   let column = rows.column
//   let rowIndex = rows.rowIndex
//   let columnIndex = rows.columnIndex
//   console.log("arraySpanMethod触发")

//   if(xx11.value != row.locationName){
//     // xx11.value = row.locationName
//   }
// }

</script>
  
<style scoped>
.searchForm {
  margin-top: 20px;
  display: flex;
}

.el-link {
  margin-right: 8px;
}
.success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}


</style>